<template>
  <div class="page-box">
    <!-- 头部区域 -->
    <tool-bar>
      <el-form :inline="true"
               size="small">
        <el-form-item label="账号">
          <el-input v-model.trim="query.login_name"
                    placeholder="请输入"
                    clearable
                    @clear="initData"></el-input>
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model.trim="query.phone"
                    placeholder="请输入"
                    clearable
                    @clear="initData"></el-input>
        </el-form-item>
        <el-form-item label="账号状态">
          <el-select v-model="query.status"
                     placeholder="请选择"
                     clearable
                     @clear="initData"
                     width="100">
            <el-option label="全部"
                       value=""></el-option>
            <el-option label="启用"
                       :value="1"></el-option>
            <el-option label="冻结"
                       :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
           <el-button type="primary"
                     icon="el-icon-search"
                     @click="searchSubmit">{{ $t('base.search') }}</el-button>
          <el-button icon="el-icon-refresh" @click="searchCancel">{{ $t('base.reset') }}</el-button>
        </el-form-item>
      </el-form>
    </tool-bar>

    <!-- 自定义表格组件 -->
    <custom-table  title="用户信息"
                  :btn-list="['export']"
                  :list="list"
                  @refresh="refreshListData"
                  show-index
                  :columns="columnsData"
                  :loading="loading">
    <!-- 左侧自定义按钮 -->
    <template #btnbox>
      <el-button
            size="mini"
            plain
            type="primary"
            icon="el-icon-plus"
            @click="$refs.vinfo.isShow=true"
             v-permission="'sys_user@add'"
            >{{ $t("base.add") }}</el-button>
    </template>

      <!-- 管理员角色 -->
      <template  slot="rolename" slot-scope="{ row }" v-if="row">
          <el-tag style="margin:4px;"
                  v-for="(item,index) in row.rolename"
                  :key="index"
                  type="success">{{item}}</el-tag>
      </template>
       <!-- 状态 -->
      <template  slot="status" slot-scope="{ row }">
          <el-switch v-model="row.status"
                     @change="changeStatus(row.id,$event)"
                     active-text="启用"
                     inactive-text="冻结"
                     :active-value="1"
                     :inactive-value="0">
          </el-switch>
      </template>
      <!-- 操作列 -->
      <template slot="action"
                slot-scope="scope">
        <el-button @click="edit({...scope.row})"
                  icon="el-icon-edit"
                  type="primary"
                  circle
                    v-permission="'sys_user@update'"
                  size="small"></el-button>
        <el-button @click="del(scope.row.id)"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                     v-permission="'sys_user@del'"
                  size="small"></el-button>
      </template>
    </custom-table>

    <!-- 分页组件 -->
    <Pagination :total="total"
                :page.sync="page"
                :page-sizes="pageSizes"
                :limit.sync="limit"
                @pagination="paginationChange" />

    <!-- 添加/修改 -->
    <v-info ref="vinfo" @update-list="initData"></v-info>

  </div>
</template>

<script>
import vInfo from './components/info'
import { getListData, updateData, delData } from '@/api/system/user'
import list from '@/mixins/list'
// 默认查询参数
const defaultQuery = {
  login_name: '',
  status: '',
  phone: ''
}
export default {
  name: 'User',
  components: {
    vInfo
  },
  data () {
    return {
      // 查询参数
      query: { ...defaultQuery },
      // 表格显示数据
      columnsData: [
        { prop: 'login_name', label: '账号' },
        { prop: 'name', label: '姓名', disableCheck: true },
        { prop: 'email', label: '邮箱' },
        { prop: 'phone', label: '手机号' },
        { prop: 'rolename', label: '角色', template: 'rolename' },
        { prop: 'create_date', label: '创建时间', tooltip: true },
        { prop: 'status', label: '状态', template: 'status' }
      ]
    }
  },
  mixins: [list],
  methods: {
    // 初始化数据
    async initData () {
      const { query, page, limit } = this
      const { data, count } = await getListData({ ...query, page, limit })
      this.list = data
      this.total = count
      this.loading = false
    },
    // 搜索提交
    searchSubmit () {
      this.page = 1
      this.initData()
    },
    // 搜索重置
    searchCancel () {
      this.page = 1
      this.query = { ...defaultQuery }
      this.initData()
    },
    // 删除
    async del (id) {
      try {
        await this.$confirm(this.$t('base.delConfimText'))
        await delData({ id })
        this.$message.success(this.$t('base.delSuccessText'))
        this.initData()
      } catch (e) {
        return this.$message.info(this.$t('base.cancelText'))
      }
    },
    // 更换状态
    async changeStatus (id, status) {
      await updateData({ id, status })
      this.$message.success('切换成功')
    }
  }
}
</script>
<style scoped>
</style>
